<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content bg-white">
            <!-- 顶部导航 -->
            <div class="flex items-center p-4">
                <button class="text-gray-700"><i class="fas fa-arrow-left"></i></button>
                <button class="ml-auto text-gray-700"><i class="fas fa-ellipsis-h"></i></button>
            </div>

            <!-- 登录表单 -->
            <div class="px-6 pt-6">
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-500 mb-4">
                        <i class="fas fa-graduation-cap text-white text-2xl"></i>
                    </div>
                    <h1 class="text-2xl font-bold">知识付费会员App</h1>
                    <p class="text-gray-500 mt-2">登录账号，开启你的学习之旅</p>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fas fa-mobile-alt"></i>
                            </span>
                            <input type="tel" placeholder="请输入手机号" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between items-center mb-1">
                            <label class="block text-sm font-medium text-gray-700">密码</label>
                            <a href="#" class="text-sm text-blue-500">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" placeholder="请输入密码" class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <button class="w-full bg-blue-500 text-white font-semibold py-3 rounded-lg mt-4">
                        登录
                    </button>

                    <div class="flex justify-center mt-4">
                        <button class="text-blue-500 font-medium">
                            使用验证码登录
                        </button>
                    </div>
                </div>

                <div class="my-8 flex items-center">
                    <div class="flex-1 h-px bg-gray-200"></div>
                    <span class="px-4 text-sm text-gray-500">其他登录方式</span>
                    <div class="flex-1 h-px bg-gray-200"></div>
                </div>

                <div class="flex justify-center space-x-6">
                    <button class="w-12 h-12 rounded-full flex items-center justify-center bg-green-50">
                        <i class="fab fa-weixin text-green-500 text-xl"></i>
                    </button>
                    <button class="w-12 h-12 rounded-full flex items-center justify-center bg-blue-50">
                        <i class="fab fa-qq text-blue-500 text-xl"></i>
                    </button>
                    <button class="w-12 h-12 rounded-full flex items-center justify-center bg-red-50">
                        <i class="fab fa-weibo text-red-500 text-xl"></i>
                    </button>
                    <button class="w-12 h-12 rounded-full flex items-center justify-center bg-yellow-50">
                        <i class="fas fa-comment text-yellow-500 text-xl"></i>
                    </button>
                </div>

                <div class="text-center my-8">
                    <span class="text-gray-600">还没有账号? </span>
                    <a href="#" class="text-blue-500 font-medium">立即注册</a>
                </div>

                <div class="text-center text-xs text-gray-500 mt-8 mb-4">
                    <p>登录即代表您同意</p>
                    <p class="mt-1">
                        <a href="#" class="text-blue-500">《用户协议》</a>
                        和
                        <a href="#" class="text-blue-500">《隐私政策》</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册界面 (默认隐藏) -->
    <div class="iphone-container hidden">
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <div class="page-content bg-white">
            <div class="flex items-center p-4">
                <button class="text-gray-700"><i class="fas fa-arrow-left"></i></button>
                <h1 class="text-lg font-semibold mx-auto">注册账号</h1>
            </div>

            <div class="px-6 pt-4">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fas fa-mobile-alt"></i>
                            </span>
                            <input type="tel" placeholder="请输入手机号" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                        <div class="flex space-x-2">
                            <div class="relative flex-1">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fas fa-shield-alt"></i>
                                </span>
                                <input type="text" placeholder="请输入验证码" class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>
                            <button class="px-4 py-3 bg-blue-500 text-white font-medium rounded-lg whitespace-nowrap text-sm">
                                获取验证码
                            </button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">设置密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" placeholder="请设置6-20位密码" class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">密码由字母、数字或符号组成</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" placeholder="请再次输入密码" class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="flex items-center mt-2">
                        <input type="checkbox" id="agreement" class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500">
                        <label for="agreement" class="ml-2 block text-sm text-gray-600">
                            我已阅读并同意
                            <a href="#" class="text-blue-500">《用户协议》</a>
                            和
                            <a href="#" class="text-blue-500">《隐私政策》</a>
                        </label>
                    </div>

                    <button class="w-full bg-blue-500 text-white font-semibold py-3 rounded-lg mt-6">
                        注册
                    </button>

                    <div class="text-center mt-4">
                        <span class="text-gray-600">已有账号? </span>
                        <a href="#" class="text-blue-500 font-medium">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 